<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="stylesheet" href="../../../../public/css/general.css">
    <link rel="stylesheet" href="../../../../public/css/mint-ui/lib/style.css">
    <link rel="stylesheet" href="../../../../public/css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../../../public/css/wechat/details.css">
    <title>白蔬贞</title>
</head>
<body>
<div id="details">
    <div class="mask" v-if="isShowMask">
        <div class="change-num">
            <div class="top">输入数量</div>
            <div class="middle">
                <img @click="reduce()" src="../../../../public/images/reduce.png" alt="减">
                <input v-focus type="number" v-model.number="num">
                <img @click="plus()" src="../../../../public/images/plus.png" alt="加">
            </div>
            <div class="bottom">
                <div @click="cancel()" class="cancel">取消</div>
                <div @click="confirm()" class="confirm button-jb-g">确定</div>
            </div>
        </div>
    </div>
    <!--顶部区域-->
    <div class="top-bar">
        <a href="javascript:;" @click="goBack()">
            <i class="iconfont">&#xe665;</i>
        </a>
        <span>产品名称</span>
    </div>
    <div class="content">
        <div class="detail">
            <img :src="details.img" alt="">
            <div class="card" v-if="!popupVisible">
                <div class="name bsz-text-ellipsis" v-text="details.name"></div>
                <div class="norm">
                    <div class="label">规格：</div>
                    <div class="norm-list">
                        <div @click="changeNorm(n)" :class="{selected: selected==n}" v-for="n in details.normList" v-text="1+n.unit"></div>
                    </div>
                </div>
                <div class="price">
                    <div class="label">单价：<span v-text="'¥'+selected.price"></span></div>
                    <div class="control">
                        <img v-if="isShowMask" src="../../../../public/images/reduce.png" alt="">
                        <span v-if="isShowMask" v-text="num"></span>
                        <img @click="clickPlus(details, selected)" src="../../../../public/images/plus.png" alt="">
                    </div>
                </div>
                <div class="details-info">规格，规格，详情</div>
            </div>
            <div class="unit-card" v-if="popupVisible">
                <div class="name bsz-text-ellipsis" v-text="details.name"></div>
                <div class="norm">
                    <div class="label">规格：</div>
                    <div class="norm-list">
                        <div @click="changeNorm(n)" :class="{selected: selected==n}" v-for="n in details.normList" v-text="1+n.unit"></div>
                    </div>
                </div>
                <div class="bubble">
                    <!--<img src="../../../../public/images/bubble.png" alt="">-->
                    <div class="unit-price">
                        <div v-for="n in details.priceList">
                            <span v-text="n.money"></span>
                            <span v-text="n.num"></span>
                        </div>
                        <div>
                            <span>
                                <span class="money-unit" v-text="details.moneyUnit"></span>/<span class="unit" v-text="details.unit"></span>
                            </span>
                            <span v-text="details.unit"></span>
                        </div>
                    </div>
                </div>
                <div class="price">
                    <div class="label">单价：<span v-text="'¥'+selected.price"></span></div>
                    <div class="control">
                        <img v-if="isShowMask" src="../../../../public/images/reduce.png" alt="">
                        <span v-if="isShowMask" v-text="num"></span>
                        <img @click="clickPlus(details, selected)" src="../../../../public/images/plus.png" alt="">
                    </div>
                </div>
                <div class="details-info">规格，规格，详情</div>
            </div>
            <div class="info">
                <img :src="details.img" alt="">
            </div>
        </div>
        <div class="tab-bar">
            <div class="total">
                <span>
                    <img @click="isShowCart=!isShowCart" src="../../../../public/images/cart4.png" alt="">
                    <sup v-if="cartNum>0" v-text="cartNumFilter"></sup>
                </span>
                <span>合计：<span class="money" v-text="'¥'+cartTotal"></span></span>
            </div>
            <div @click="submitOrder()" class="button button-jb-g">去结算</div>
        </div>
        <div class="cart" v-if="isShowCart">
            <div class="top button-jb-g">
                <span>已选</span>
                <span @click="cartBarTip=(cartBarTip=='编辑'?'完成':'编辑')" v-text="cartBarTip">编辑</span>
            </div>
            <div class="cart-products">
                <div class="card" v-for="p in cartProducts">
                    <!--<div v-if="cartBarTip=='完成'" class="radio" @click="selectProduct(p)">
                        <img v-if="!p.isSelected" src="../../../../public/images/radio-unselected.png" alt="单选按钮">
                        <img v-if="p.isSelected" src="../../../../public/images/radio-selected.png" alt="单选按钮">
                    </div>-->
                    <div class="product-name bsz-text-ellipsis" v-text="p.name"></div>
                    <div v-if="cartBarTip!='完成'" class="product-num bsz-text-ellipsis" v-text="'x'+p.num+'/'+p.unit"></div>
                    <div v-if="cartBarTip=='完成'" class="control">
                        <img @click="cartReduce(p)" src="../../../../public/images/reduce.png" alt="">
                        <input readonly type="number" v-model.number="p.num">
                        <img @click="cartPlus(p)" src="../../../../public/images/plus.png" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../../../../public/js/vue.js"></script>
<script src="../../../../public/css/mint-ui/lib/index.js"></script>
<script src="../../../../public/js/jquery.min.js"></script>
<script src="../../../../public/js/store.js"></script>
<script src="../../../../public/js/wechat/mixin.js"></script>
<script src="../../../../public/js/wechat/details/index.js"></script>
</body>
</html>